<template>
  <view class="layout about">
    <view
      class="header"
      :style="{
        backgroundImage: 'url(' + IMAGES.ABOUT_BG + ')'
      }"
    >
      <!-- #ifdef APP-PLUS -->
      <view class="version">V{{ version }}版本</view>
      <!-- #endif -->
    </view>
    <view class="content">
      <!-- #ifdef APP-PLUS -->
      <view class="item" @tap="onCheckUpdate">
        <view class="title">版本更新</view>
        <view class="extra"><text class="cuIcon-right"></text></view>
      </view>
      <!-- #endif -->
      <view class="item">
        <view class="title">联系客服</view>
        <view class="extra">
          <view>service@lianyong.onaliyun.com</view>
          <!-- <text class="cuIcon-right"></text> -->
        </view>
      </view>
      <view class="item">
        <view class="title">客服QQ</view>
        <view class="extra">
          <view>923516324</view>
          <!-- <text class="cuIcon-right"></text> -->
        </view>
      </view>
      <!-- #ifdef APP-PLUS -->
      <view class="item" @tap="onCleanCache">
        <view class="title">清除缓存</view>
        <view class="extra">(500k)</view>
      </view>
      <!-- #endif -->
    </view>
    <view class="footer">
      <view class="name">上海莲永信息技术有限公司</view>
      <view class="copyright">copyright©2018-2019</view>
    </view>
  </view>
</template>

<script>
import config from "@/config";
import { IMAGES } from "@/config/resources";
export default {
  data() {
    return {
      version: "1.0.0"
    };
  },
  computed: {
    IMAGES: () => IMAGES
  },
  onLoad() {
    plus.runtime.getProperty(plus.runtime.appid, inf => {
      this.version = inf.version;
    });
  },
  methods: {
    // 检查更新
    onCheckUpdate() {},
    onCleanCache() {
      uni.request({
        url: config.BASE_API_URL + "user/freshData",
        header: {
          Authorization: this.$store.state.TOKEN
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.about {
  height: 100%;
  width: 100%;
  .header {
    height: 374upx;
    width: 100%;
    background-size: 100% 100%;
    position: relative;
    .version {
      position: absolute;
      bottom: 20upx;
      left: 0;
      right: 0;
      width: 100%;
      color: #ffffff;
      text-align: center;
    }
  }
  .content {
    .item {
      background-color: #ffffff;
      margin: 10upx auto;
      width: 95%;
      padding: 30upx 40upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #3c3c3c;
      .extra {
        display: flex;
        align-items: center;
        color: #ff7b05;
        .cuIcon-right {
          color: #0f86c3;
        }
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 60upx;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    color: #9aa2af;
  }
}
</style>
